
<!-- 商屏列表内容 -->
<template>
    <div class="shoppingBox">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :offset=500>
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" :offset=500
                @load="onLoadGoodsList">
                <ul class="smollBox">
                    <li v-for="item in shoppingList" :key="item.proid">
                        <img :src="item.img1" alt="">
                        <p class="title van-multi-ellipsis--l2">{{item.proname}}</p>
          
                        <p class="price"> <span style="color: red;">  ￥ {{ item.issale ? (item.originprice * 10 / item.discount).toFixed(2) : item.originprice.toFixed(2) }}</span>  <span style="text-decoration: line-through;"> ￥ {{ item.originprice.toFixed(2) }}</span></p>
                        <p class="pingPai" >
                            <van-tag type="danger" style="padding :3px">{{item.category}}</van-tag>
                            <van-tag type="success">{{item.brand}}</van-tag>
                        </p>

                    </li>
                </ul>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup lang="ts">
import { ShoppingApi } from '@/api/goods';
import { ref, reactive } from 'vue'
//导入ts接口
import type { MyMiaoSaItem } from '@/config/interface'

//商品列表
const shoppingList = ref<MyMiaoSaItem[]>([])
//准备一个数据表示请求相关的信息 ， 后面的数据
const goodsInfo = reactive<{ count: number, limitNum?: number }>({ count: 1, limitNum: 10 })

const loading = ref<boolean>(false);   //loading	自定义底部加载中提示 加载过程层中把状态变为true 加载完毕之后自动把状态变为false
// 准备一个变量, 表示下拉刷新控制器
const refreshing = ref<boolean>(false)
//finished 加载完毕之后没有数据了 ， 就将状态变为true，就不会加载了
const finished = ref<boolean>(false);

//设置开关
const flag = ref<boolean>(true)
//滚动到底部促发的事件
const onLoadGoodsList = () => {
    console.log('加载数据');
    if (!flag.value) return
    flag.value = false
    //因为这个时候数据加载的时候，会把所有的数据直接都加载出来，所以要放到延时器
    setTimeout(async () => {

        const res = await ShoppingApi(goodsInfo)
        console.log(res);
        shoppingList.value = [...shoppingList.value, ...res.data]

        //修改goodsInfo的count  ，为了下次加载时候，数据变化
        goodsInfo.count++
        //将加载完毕状态变为false ，使其继续加载
        loading.value = false
        //开启开关
        flag.value = true
        //当res.data的length为空的话，那麽久不需要自此加载了
        if (res.data.length == 0) finished.value = true


    }, Math.random() * 1000 + 2000)

}

//页面刷新促发的事件
const onRefresh = () => {
    setTimeout(async () => {
        //应该是调用的后端接口，这里模拟一个随机的页面
        goodsInfo.count = Math.floor(Math.random()*2+5)

        //请求数据
        const res = await ShoppingApi(goodsInfo)
        //刷新后请求回来的数据替赋值给当前渲染的数组
        shoppingList.value = res.data

            // 让当前页++
    goodsInfo.count++
        //然后让下拉刷新弹回去
        refreshing.value = false;

    },3000)
}

</script>
<style scoped lang="scss">
.shoppingBox {
    box-sizing: border-box;
    background-color: #fff;

    padding: 0 15px;
    :deep(.smollBox){
        // width: 300px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
   
        >li{
            width: 48%;
            margin-bottom: 10px;
            border: 1px solid black;
            padding: 8px 0;
            >img{
                width: 100%;
            }
            p{
                line-height: 26px;
            }
        }
    }
}
.price{
    width: 100%;
    display: flex;
    justify-content: space-around;
}
.pingPai{
    display: flex;
    justify-content: space-around;
}
</style>